<template>
  <el-dialog v-model="store.state.dialogFormVisible" title="请输入修改内容">
   <el-form :model="form">
     <el-form-item label="姓名" :label-width="formLabelWidth">
       <el-input v-model="form.name" autocomplete="off" />
     </el-form-item>
     <el-form-item label="详细地址" :label-width="formLabelWidth">
         <el-input v-model="form.region" autocomplete="off" />
     </el-form-item>
   </el-form>
   <template #footer>
     <span class="dialog-footer">
         <!-- 绑定函数 -->
       <el-button @click="toggleDialog()">取消</el-button>
       <el-button type="primary" @click="toggleDialog()"
         >确定</el-button
       >
     </span>
   </template>
  </el-dialog>
  </template>
  <script setup lang="ts">
import { reactive, ref } from 'vue'
// 引用useStore
import { useStore } from "vuex";
// 得到store对象
const store = useStore();
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
  const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  })
  let toggleDialog=()=>{
// 调用vuex修改
store.commit("SET_DIALOG")
}
  </script>
  <style scoped>
  .el-button--text {
  margin-right: 15px;
  }
  .el-select {
  width: 300px;
  }
  /* .el-input {
  width: 300px;
  } */
  .dialog-footer button:first-child {
  margin-right: 10px;
  }
  </style>